<template>
  <div class="login">
    <div class="login-title"  >
      <img src="@/assets/login/loginIcon.png" alt="" />
    </div>
    <div class="login-box">
      <img src="@/assets/login/loginBg@2x.png" alt="" />
      <div class="login-box-user">
        <p>你好！欢迎登录运输 测振仪智能监控平台</p>
        <p>手机号</p>
        <el-input placeholder="请输入手机号" v-model="input"></el-input>
        <p>登录密码</p>
        <el-input placeholder="请输入密码" v-model="psd" type="password"></el-input>
        <el-button type="primary" @click="login" >登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      psd: "",
    };
  },
  methods: {
    
    login() {
      if (this.input == "" || this.psd == "") {
        this.$message({
          message: "用户名或密码不能为空",
          type: "warning",
          offset: 230,
        });
      } else {
        this.axios(
          "post",
          this.inter.postlogin + `?phone=${this.input}&password=${this.psd}`
        ).then((res) => {
          if(res){
            sessionStorage.setItem("token",res.token)
            this.$router.push('/')
          }
        })
      }
    },
  },
  mounted(){
    document.onkeypress =  (e)=> {
      let key = window.event.keyCode;
      if(key === 13){
        this.login()
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.login {
  &-box {
    &-user {
      .el-button {
        margin-top: 0.3rem;
        width: 100%;
        background: linear-gradient(-90deg, #0069b3, #007dd5);
      }
      input {
        text-align: start;
      }
      p {
        &:nth-child(4) {
          margin-top: 0.2rem;
        }
        &:nth-child(2) {
          margin-top: 0.2rem;
        }
        &:nth-child(1) {
          &::before {
            position: absolute;
            content: "";
            width: 20%;
            height: 0.01rem;
            bottom: -0.06rem;
            background: linear-gradient(90deg, #0069b3, #008cef);
          }
          position: relative;
          font-size: 0.2rem;
          font-weight: bold;
          color: #0069b3;
        }
        text-align: start;
        font-size: 0.1rem;
      }
      margin: 0 auto;
      width: 24%;
    }
    img {
      width: 40%;
    }
    display: flex;
    width: 60%;
    margin: 0.3rem auto;
    border-radius: 0.3rem;
    background: #fff;
    padding: 1rem;
  }
  &-title {
    img {
      width: 100%;
    }
    width: 20%;
    margin-left: 2rem;
    margin-top: 0.8rem;
    font-size: 0;
  }
  background: url(../assets/login/login.png) center no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 100%;
  display: table;
  height: 100vh;
}
</style>